<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- build:css /css/main.css -->
		<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
		<!-- endbuild -->
		<style>
			.mui-col-xs-3,
			.mui-col-xs-9 {
				height: 100%;
				overflow-y: auto;
			}

			.mui-segmented-control .mui-control-item {
				line-height: 40px;
				width: 100%;
				text-align: center;
				padding-right: 10px;
				background: #f8f8f8;
				border-bottom: 1px solid #ddd;
			}

			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background: #fff;
				color: #f44623;
				border-left: 3px solid #F44623;
				border-right: none;
			}

			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
				border-right: 1px solid #ddd;
			}

			.mui-table-view-cell {
				padding: 8px;
				text-align: center;
				background-color: #F9F9F9;
			}

			.mui-table-view:after,
			.mui-table-view-cell:after {
				height: 0px;
			}

			.mui-control-content {
				font-size: 0.9em;
			}

			.mui-bar-tab~.mui-content {
				padding-bottom: 0;
			}

			#categoryStair i {
				font-style: normal;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav  u-nav">
			<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">所有分类</h1>
			<span id="to_info" class="mui-icon mui-icon-bars mui-pull-right" onclick="ssdd('#fnav')"></span>
		</header>
		<nav class="mui-bar mui-bar-tab otherNav" id="fnav">
			<a class="mui-tab-item" data-id="index.html" data-url="/index.html">
				<span class="mui-icon iconfont icon-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="category.html" data-url="/category.html">
				<span class="mui-icon iconfont icon-fenlei"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item" data-id="search.html" data-url="/search.html">
				<span class="mui-icon iconfont icon-fenleisousuo-home"></span>
				<span class="mui-tab-label">搜索</span>
			</a>
			<a class="mui-tab-item" data-id="cart.html" data-url="/cart.html">
				<span class="mui-icon iconfont icon-gouwuche1"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" data-id="user.html" data-url="/user/user.html">
				<span class="mui-icon iconfont icon-gerenzhongxin"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>

		<div class="mui-content mui-row mui-fullscreen">
			<div class="mui-col-xs-3" style="background: #f8f8f8;">
				<div id="categoryStair" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="categoryMovers" class="mui-col-xs-9" style="background: #fff;">
				<div id="category" class="mui-control-content mui-active child-cate">

				</div>
			</div>
		</div>

		<!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		<!-- bower:js -->
		<script src="/bower_components/mockjs/dist/mock.js"></script>
		<script src="/bower_components/zepto/zepto.js"></script>
		<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		<!--  endbower -->
		<!-- endbuild -->
		<!-- build:js /js/main.js -->
		<script src="/js/common.js"></script>
		<script src="/js/app.js"></script>
		<!-- endbuild -->
		<script type="text/javascript">
			$.post(__BATE__ + 'api/categoryTreeOne', {
				code: codeVal
			}, function(json) {

				console.log(json);
				var htmls = '';
				for(var i = 0; i < json.length; i++) {
					htmls = htmls + '<i class="mui-control-item" href="javascript:;" onclick="getSec(' + json[i].id + ')" data-id="' + json[i].id + '">' + json[i].appCategoryName + '</i>';
				}
				$("#categoryStair").html(htmls);

				$('.mui-control-item').first().addClass('mui-active').click();
			});

			function getSec(id) {
				$.ajax({
					url: __BATE__ + 'api/categoryTreeTwoAndThree',
					data: {
						id: id,
						code: codeVal
					},
					type: 'get',
					success: function(json) {

						console.log(json);
						var htmls = '';

						for(var i = 0; i < json.length; i++) {
							htmls += '<div><em>' + json[i].appCategoryName + '</em><div class="elecfenlei">';
							var hh = '';
							for(var k = 0; k < json[i].categoryModelList.length; k++) {
								hh += '<a data-name="' + json[i].categoryModelList[k].name + '" data-id="' + json[i].categoryModelList[k].id + '"><img src="' + json[i].categoryModelList[k].img + '" />' +
									'<span>' + json[i].categoryModelList[k].appCategoryName + '</span></a>' +
									'';
							}

							htmls = htmls + hh + '</div></div>';
						}
						$("#category").html(htmls);

					},
					error: function() {
						serverErr();
					}
				});
			}

			mui("#category").on('tap', 'a', function() {
				mui.openWindow({
					url: 'category-list.html',
					id: 'category-list.html',

				})
				localStorage.setItem('categoryid', this.getAttribute('data-id'));
				localStorage.setItem('keyword', '');
			});
		</script>
	</body>

</html>
